<template>
  <div style="margin:30px;margin-top:1px">
    <el-row >
      <el-col  :span="4">
        <el-button style="padding-left:50px;padding-right:50px;height:30px;line-height:0"  type="primary" @click="$router.push({ name: 'message'})" plain>返回</el-button>
      </el-col>
    </el-row>
    <h3 style="margin-top:30px">竞赛信息</h3>
    <el-row class="totality">
      <el-col  :span="4">
        <div class="l-top-50 grid-content bg-purple">竞赛名称</div>
      </el-col>
      <el-col :span="8">
        <div class="r-top-50-0 grid-content bg-purple">{{ conpertitonDetail.name || '/'}}</div>
      </el-col>
      <el-col  :span="4">
        <div class="l-50 grid-content bg-purple">竞赛起止时间</div>
      </el-col>
      <el-col :span="8">
        <div class="r-50 grid-content bg-purple">{{ conpertitonDetail.startTime|| '/' }}</div>
      </el-col>
    </el-row>

    <el-row class="totality">
      <el-col  :span="4">
        <div class="l-50 grid-content bg-purple">主办单位</div>
      </el-col>
      <el-col :span="8">
        <div class="r-50-0 grid-content bg-purple">{{ conpertitonDetail.company || '/'}}</div>
      </el-col>
      <el-col  :span="4">
        <div class="l-50 grid-content bg-purple">竞赛费用</div>
      </el-col>
      <el-col :span="8">
        <div class="r-50 grid-content bg-purple">{{ conpertitonDetail.money || '/'}}</div>
      </el-col>
    </el-row>


    <el-row class="totality" style="height: 160px">
      <el-col  :span="4" style="height: 100%;">
        <div class="left-l grid-content bg-purple" style="height: 100%;text-align: inherit; line-height: 100px;">竞赛内容</div>
      </el-col>
      <el-col :span="20" style="height: 100%;">
        <div class="r-bottom-50 grid-content bg-purple" style="height: 100%;">{{ conpertitonDetail.content || '/'}}</div>
      </el-col>
    </el-row>
   
     <el-row >
      <el-col :span="4">
        <div class="l-150 grid-content bg-purple">竞赛附件</div>
      </el-col>
      <el-col :span="20">
        <div class="r-bottom-150 grid-content bg-purple">
          <!-- 如果既有图片又有压缩包格式 -->
          <div v-if="competitionShow==2" >
            <div style="margin-top:10px;padding-left:10px;display:inline-block;width:170px;height:170px">
               <el-image  v-for="(v,i) in competitionUrl"  :key="i" style="margin-right:20px;padding-left:10px; padding-bottom:20px" :src="v.url" alt="" :preview-src-list="[v.url]"> </el-image>
            </div>
            <div  v-for="(item,index) in competitionUrlZip " :key="index" style="display:flex;margin-right:20px;display:inline-block;margin-left:-250px">
              <img v-if="item.name==='.zip'" style="width:50px;height:50px;" src="../../../../assets/img/zip.png" alt="">
              <img v-if="item.name==='.doc' || item.name==='.docx'"  style="width:50px;height:50px;" src="../../../../assets/img/word.png" alt=""> 
              <img v-if="item.name==='.xls' || item.name==='.xlsx'" style="width:50px;height:50px;" src="../../../../assets/img/excel.png" alt="">
              <img v-if="item.name==='.pdf' || item.name==='.pptx'" style="width:50px;height:50px;" src="../../../../assets/img/ppt.png" alt="">
              <div class="down" @click="down(item.url)">
                <span>下载</span>
              </div>
            </div>
          </div>
          <!-- 只有压缩包格式 -->
          <div v-if="competitionShow==1" style="display:flex;margin-top:10px;padding-left:10px;">
            <div   v-for="(item,index) in competitionUrlZip " :key="index" style="display:flex;margin-right:20px">
              <img v-if="item.name==='.zip'" style="width:50px;height:50px;" src="../../../../assets/img/zip.png" alt="">
              <img v-if="item.name==='.doc' || item.name==='.docx'"  style="width:50px;height:50px;" src="../../../../assets/img/word.png" alt=""> 
              <img v-if="item.name==='.xls' || item.name==='.xlsx'" style="width:50px;height:50px;" src="../../../../assets/img/excel.png" alt="">
              <img v-if="item.name==='.pdf' || item.name==='.pptx'" style="width:50px;height:50px;" src="../../../../assets/img/ppt.png" alt="">
              <div class="down" @click="down(item.url)" style="padding-top:20px">
                <span>下载</span>
              </div>
            </div>
          </div>
          <!-- 只有图片格式 -->
          <div  v-if="competitionShow==0" style="display:flex">
            <div  v-for="(item,index) in competitionUrl " :key="index" style="display:flex;margin-right:20px;width:170px;height:170px">
              <el-image    :src="item.url" alt="" :preview-src-list="[item.url]"> </el-image>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>



    <h3 v-if="this.$route.params.id === 'W'|| this.$route.params.id === 'Y'">审批信息</h3>
    <el-row v-if="this.$route.params.id === 'W'|| this.$route.params.id === 'Y'" class="totality">
      <el-col  :span="4">
        <div class="l-bottom-50 grid-content bg-purple">审批人</div>
      </el-col>
      <el-col :span="8">
        <div class="r-bottom-50-0 grid-content bg-purple">{{ conpertitonDetail.resultUser || '/'}}</div>
      </el-col><el-col  :span="4">
      <div class="l-bottom-50 grid-content bg-purple">审批时间</div>
    </el-col>
      <el-col :span="8">
        <div class="r-bottom-50 grid-content bg-purple">{{ conpertitonDetail.resultTime || '/'}}</div>
      </el-col>
    </el-row>
    <el-row v-if="this.$route.params.id === 'W'" class="totality" >
      <el-col  :span="4" >
        <div class="l-bottom-top-150 grid-content bg-purple">原因</div>
      </el-col>
      <el-col :span="20">
        <div class="r-bottom-150 grid-content bg-purple" >{{ conpertitonDetail.resultSummary || '/'}}</div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 80px">
      <el-col  :span="10">
        <div>&nbsp;</div>
      </el-col>
      <el-col  :span="6">
        <el-button style="padding-left:50px;padding-right:50px;height:30px;line-height:0"  v-if="this.$route.params.id === 'D'"   type="primary" @click="open()">通过</el-button>
        <el-button style="padding-left:50px;padding-right:50px;height:30px;line-height:0"  v-if="this.$route.params.id === 'D'" @click="dataFormSubmit('拒绝')">拒绝</el-button>
        <el-button style="padding-left:50px;padding-right:50px;height:30px;line-height:0"  v-if="this.$route.params.id !== 'D'" type="primary" @click="$router.push({ name: 'message', params: {id:'competition'} })" plain>返回</el-button>
      </el-col>
      <el-col :span="10">
        <div>&nbsp;</div>
      </el-col>

    </el-row>
    <!-- 拒绝弹窗 -->
    <el-dialog
      title="原因"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <el-input
        type="textarea"
        placeholder="请输入拒绝原因"
        v-model="textarea"
        maxlength="500"
        show-word-limit
        @input="textInputChange"
        size="medium"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button style="padding-left:50px;padding-right:50px"  @click="centerDialogVisible = false">取 消</el-button> -->
        <el-button style="padding-left:50px;padding-right:50px;height:30px;line-height:0"  type="primary" @click="dialogSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>


  export default {
    data() {
      return {
        type: 'D',
        txtVal: 0,
         // 拒绝弹窗
        centerDialogVisible:false,
         // 传递过来的教职信息详情数据
        conpertitonDetail:{},
        // 拒绝弹窗实时输入的内容数据绑定
        textarea:'',
        inputContent:'',
        // 竞赛id
        competitionId:'',
        // type: this.$route.params.type
         // 竞赛附件图片列表
        competitionUrl:[],
        // 竞赛资源附件压缩包列表
        competitionUrlZip:[],
        // 是否显示竞赛资源附件区域
        competitionShow:0,
      }
    },
    computed: {},
    created() {
      this.type = this.$route.params.id
      this.competitionId=this.$route.params.item.competitionId
    },
     watch: {
      $route: {
        deep: true,
        immediate: true,
        handler(val) {
          if(val){
            let path=val.name
            if(path=='competition-particulars'){
              this.competitionId=val.params.item.competitionId
              this.getConpertitionDetailData()
            }
          }
        }
      }
    },
    methods: {
      // 获取竞赛信息详情数据
      getConpertitionDetailData(){
          this.$http({
          url: this.$http.adornUrl('/info/competitionDetails?competitionId='+this.competitionId
          ),
          method: 'post',
          data:{}
        }).then(res=>{
          this.conpertitonDetail=res.data.data
          console.log('路径',res.data.data.url)
          this.competitionUrl=[]
          this.competitionUrlZip=[]
           //  竞赛附件赋值
          this.getUrlChangeOutlineUrlListData(res.data.data.url)
          console.log('获取竞赛信息详情数据', this.conpertitonDetail)
        })
      },
       // 竞赛附件格式化
      getUrlChangeOutlineUrlListData(url){
        if(url){
          console.log('竞赛附件',url)
          // 判断是否为json字符串在做解析
          if(url.indexOf("[")!= -1){
            console.log('走有数组符号的')
            var img=JSON.parse(url)
            if(url.indexOf(".png")!= -1 && url.indexOf(".zip")!= -1){
              this.outlineUrShow=2
              img.forEach((item,index)=>{
                let type=img[index].substring(img[index].lastIndexOf('.')).toLowerCase()
                if(type=='.jpg' || type=='.jpeg' ||  type=='.png'){
                  let obj={
                    name:type,
                    url:img[index]
                  }
                  this.outlineUrl.push(obj)
                }else {
                    let obj={
                    name:type,
                    url:img[index]
                  }
                  this.outlineUrlZip.push(obj)
                }
              })
            }else if(url.indexOf(".png")!= -1 || url.indexOf(".jpg")!= -1  || url.indexOf(".jpeg")!= -1 ){
              console.log('22222222',url)
              this.outlineUrShow=0
              img.forEach((item,index)=>{
                let type=img[index].substring(img[index].lastIndexOf('.')).toLowerCase()
                let obj={
                  name:type,
                  url:img[index]
                }
                this.outlineUrl.push(obj)
              })
            }else {
              this.outlineUrShow=1
              let img=JSON.parse(url)
              img.forEach((item,index)=>{
                let type=img[index].substring(img[index].lastIndexOf('.')).toLowerCase()
                let obj={
                  name:type,
                  url:img[index]
                }
                this.outlineUrlZip.push(obj)
              })
            }
          }else {


            // 如果不是json穿格式直接push到数组里
            let type=url.substring(url.lastIndexOf('.')).toLowerCase()
            if(type=='.jpg' || type=='.jpeg' || type=='.png'){
              console.log('走有数组符号图片')
              let arr=url.split(',')
              this.competitionShow=0
              arr.forEach(item=>{
                 // 如果不是json穿格式直接push到数组里
                let type=url.substring(url.lastIndexOf('.')).toLowerCase()
                let obj={
                  name:type,
                  url:item
                }
                this.competitionUrl.push(obj)
              })
             
            }else {
               console.log('走有没有数组符号压缩包',url.split(','))
              let arr=url.split(',')
              this.competitionShow=1
              arr.forEach(item=>{
                 // 如果不是json穿格式直接push到数组里
                let type=url.substring(url.lastIndexOf('.')).toLowerCase()
                let obj={
                  name:type,
                  url:item
                }
                this.competitionUrlZip.push(obj)
              })
            }
          }
        }
      },
       // 通过
      open(data) {
        var _self=this
        this.$confirm('确认提交吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('获取传递的课程信息参数',1111)
          _self.$http({
            url: _self.$http.adornUrl('/sys/competition/competitionCheck?competitionId='+_self.competitionId+'&result=1'+'&resultSummary='+_self.textarea
            ),
            method: 'post',
            data:{}
          }).then(res=>{
            console.log('获取最终竞赛信息提交的结果',res)
            if(res.data.code==0){
              _self.$message({
                type: 'success',
                message: res.data.msg
              });
               this.$router.push({ name: 'message' })
            }else {
              _self.$message({
                type: 'info',
                message: res.data.msg
              }); 
            }
          })
        }).catch(() => {
          _self.$message({
            type: 'info',
            message: res.data.msg
          });          
        });
        // const imga = require("../../../../assets/img/审批完成2.png");
        // this.$alert('<strong><img style="width: 70%;margin-left: 15%;" src='+ imga +'><div style="text-align: center;">审批通过</div></strong>', '', {
        //   dangerouslyUseHTMLString: true,
        //   showConfirmButton: false
        // });
      },
      // open() {
      //   const imga = require("../../../../assets/img/审批完成2.png");
      //   this.$alert('<strong><img style="width: 70%;margin-left: 15%;" src='+ imga +'><div style="text-align: center;">审批通过</div></strong>', '', {
      //     dangerouslyUseHTMLString: true,
      //     showConfirmButton: false
      //   });
      // },
       // 拒绝弹窗实时输入事件
      textInputChange(event){
        console.log('实时输入',event)
        this.inputContent=event
      },
      // 拒绝弹窗原因弹出
      dataFormSubmit(){
        this.centerDialogVisible=true
      },
       // 附件下载
      down(url) {
        window.open(url)
      },
       // 拒绝原因弹窗确定
      dialogSubmit(){
        // this.requestSubmit(2)
         var _self=this
        this.$confirm('确认拒绝吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _self.$http({
            url: _self.$http.adornUrl('/sys/competition/competitionCheck?competitionId='+_self.competitionId+'&result=2'+'&resultSummary='+_self.textarea
            ),
            method: 'post',
            data:{}
          }).then(res=>{
            console.log('获取最终班级信息拒绝提交的结果',res)
            if(res.data.code==0){
              _self.$message({
                type: 'success',
                message: res.data.msg
              });
              this.$router.push({ name: 'message' })
              // 关闭原因弹窗
              this.centerDialogVisible=false
            }else {
              _self.$message({
                type: 'info',
                message: res.data.msg
              }); 
            }
          })
        }).catch(() => {
          _self.$message({
            type: 'info',
            message: res.data.msg
          });          
        });
      },
      descInput(){
        this.txtVal = this.formData.field101.length;
      },
    }
  }
</script>
<style lang="scss" scoped>
.el-image{//覆盖原来图片的宽高。。让高度自适应
    /deep/ img{
      width: auto;
      height: auto;
      max-width: 170px;
      max-height: 170px;
      overflow: auto;
    }
  }
  .right-r {
    padding: 13px 13px 13px 33px;
    border: 1px solid  #e1e8ef;
    border-left: 0px solid  #e1e8ef;
  }
  .left-l {
    padding: 13px 13px 13px 33px;
    background: #ecf4fb;
    border: 1px solid  #e1e8ef;

  }
   .down{
    color: rgb(30, 15, 235);
    cursor: pointer;
    display: inline-block;
    align-items: center;
    padding-left: 10px;
  }
  .down>span:hover{
    border-bottom: 2px solid rgb(30, 15, 235);
  }
</style>

